<template>
  <div class="sh-caspanel">
    <ul ref="panel">
      <li class="no-data" v-if="dataArr.length < 1">{{noDataText}}</li>
      <Casitem
        v-else
        v-for="(item, i) in dataArr"
        :key="getkey()"
        :item="item"
        :index="i"
        :active="i === activeIndex"
        :trigger="trigger"
        @on-expand="expandChild" />
    </ul>
    <Caspanel
      v-if="expand && dataArr[activeIndex] && dataArr[activeIndex].children.length > 0"
      :dataArr="dataArr[activeIndex].children"
      :visible="visible"
      :trigger='trigger'
      :noDataText="noDataText"
      :defaultValue="defaultSelect" />
  </div>
</template>

<script>
import Casitem from './Casitem'
import { deepCopy } from '../../../utils/assist'
let key = new Date().getTime()
export default {
  name: 'Caspanel',
  components: {
    Casitem
  },
  props: {
    visible: Boolean,
    dataArr: Array,
    trigger: String,
    defaultValue: Array,
    noDataText: [String, Number]
  },
  data () {
    return {
      isFrist: true,
      activeIndex: null,
      expand: null,
      defaultSelect: deepCopy(this.defaultValue)
    }
  },
  watch: {
    expand (val) {
      if (!val) {
        this.activeIndex = null
      }
    },
    defaultValue: {
      deep: true,
      handler: function (val) {
        this.defaultSelect = deepCopy(val)
        this.defaultSelect.shift()
      }
    },
    visible (val) {
      if (!val) {
        this.expand = this.countState()
        if (this.isFrist) {
          let itemHeight = this.$refs.panel.childNodes[0].clientHeight
          this.$refs.panel.scrollTop = itemHeight * (this.activeIndex + 1)
          this.isFrist = false
        }
      }
    }
  },
  created () {
    this.expand = this.countState()
    this.defaultSelect.shift()
  },
  methods: {
    getkey () {
      return key++
    },
    isParent (labelArr, selectArr) {
      if (this.$parent.$options.name !== 'Caspanel') {
        this.$emit('on-select', { label: labelArr, select: selectArr })
      } else {
        this.$parent.emitSelect(labelArr, selectArr)
      }
    },
    countState () {
      for (let i = this.dataArr.length - 1; i > -1; i--) {
        if (this.dataArr[i].label === this.defaultValue[0]) {
          this.activeIndex = i
          break
        }
      }
      // this.dataArr.forEach((data, i) => {
      //   if (data.label === this.defaultValue[0]) {
      //     this.activeIndex = i
      //   }
      // })
      return this.defaultValue.length < 1
        ? !!this.expand
        : true
    },
    updateChild () {
      if (this.$children.length > 0) {
        this.$children.forEach(child => {
          if (child.expand) {
            child.expand = false
          }
        })
      }
    },
    emitSelect (labelArr, selectArr) {
      const result = deepCopy(this.dataArr[this.activeIndex])
      // 暂不返回子节点信息，如需返回，去掉删除。
      delete result.children
      labelArr.unshift(result.label)
      selectArr.unshift(result)
      this.isParent(labelArr, selectArr)
    },
    expandChild (obj) {
      this.activeIndex = obj.index
      this.expand = obj.expand
      this.updateChild()
      if (obj.value) {
        const labelArr = [obj.value.label]
        const selectArr = [obj.value]
        this.isParent(labelArr, selectArr)
      }
    }
  }
}
</script>
